// 混入——可复用样式块
// 使用: @include center-flex(column)


/**
 * @description: 使用 Flexbox 实现垂直水平居中（父容器需设置 display: flex）
 * @param {string} $direction: row 主轴方向（row|column）
 */
@mixin content-center-flex($direction: row) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}


/**
 * @description: 使用 Flexbox 实现元素在父容器中的居中布局
 * @param {string} $direction: 居中方向，可选值：
 *   - "row": 仅水平居中
 *   - "column": 仅垂直居中
 *   - "row,column" 或 "column,row": 同时水平和垂直居中
 */
@mixin position-center-box($direction: "row,column") {
  display: flex;


  // 检查是否包含 row（水平居中）
  @if str-index($direction, "row") {
    margin-left: auto;
    margin-right: auto;
  }

  // 检查是否包含 column（垂直居中）
  @if str-index($direction, "column") {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/**
 * @description: 严格限制元素尺寸（不会被内容撑开）
 * @param {number} $width - 严格宽度百分比（0~100）
 * @param {number} $height - 严格高度百分比（0~100）
 */
@mixin hold($width: null, $height: null) {
  // 严格宽度控制
  @if $width != null {
    width: #{$width * 1%};
    max-width: #{$width * 1%}; // 双重锁定
    overflow: hidden; // 防止内容溢出
  }

  // 严格高度控制
  @if $height != null {
    height: #{$height * 1%};
    max-height: #{$height * 1%}; // 双重锁定
    overflow: hidden; // 防止内容溢出
  }

  // 内容超出时显示滚动条（可选）
  @if $width != null or $height != null {
    overflow: auto;
  }
}

/**
 * @description: 文本溢出显示省略号
 * @param {number} $lines - 显示行数 (1为单行)
 */
@mixin text-ellipsis($lines: 1) {
  overflow: hidden;
  @if $lines == 1 {
    white-space: nowrap;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

/**
 * @description: 创建线性渐变背景
 * @param {string} $direction - 渐变方向 (to right|to bottom...)
 * @param {color} $colors... - 颜色列表 (最少2个)
 */
@mixin gradient-bg($direction: to right, $colors...) {
  background: linear-gradient($direction, $colors);
  // 兼容旧版浏览器
  background: -webkit-linear-gradient($direction, $colors);
}

/**
 * @description: 添加悬浮缩放动画
 * @param {number} $scale - 缩放倍数 (默认: 1.05)
 * @param {number} $duration - 动画时长 (默认: 0.3s)
 */
@mixin hover-scale($scale: 1.05, $duration: 0.3s) {
  transition: transform $duration ease;
  &:hover {
    transform: scale($scale);
  }
}

/**
 * @description: 生成多层阴影
 * @param {number} $level - 阴影层级 (1-5)
 */
@mixin shadow($level: 1) {
  @if $level == 1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  } @else if $level == 2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  } @else if $level == 3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19);
  } @else if $level == 4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  } @else if $level == 5 {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
}